Skip to main content

Jellyfin Themes & Extras

Jellyfin Themes​

Jellyskin​

Description: Vibrante/minimal Jellyfin CSS using custom Icons and more!!, created for Jellyfin web 🎞️, can be used by just one line.

Examples

Login Page

image

Home/Index Page

image

Library Page

image

Title Page

image

Dashboard

image

Installation​
@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");

To enable Logos add this to custom css:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");

You can also use Jellyfin-Skin-Manager-Plugin : (https://github.com/danieladov/jellyfin-plugin-skin-manager)

Note : Jellyfin Skin Manager has not been updated for some time and doesn't have the latest JellySkin css available.

Addons

Improve Performance

Remove BackdropFilter

This remove the frosted glass like effect from every place.

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance/removeBackdropFilter.css");

Remove scroll fade

This remove the faded scroll view

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance/removeFadingScroll.css");

Compact Poster

Want to use compact posters instead of normal cards, add this to your custom css:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/compactPosters.css");

Example:

image

Warning : Compact posters might not look as expected for some screen sizes

Horizontal My Media

Brings back the horizontal section for My Media

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/horizontalMyMedia.css");

Using/Changing default gradient accent

If you want want to change the default jellyfin gradient accent to some other preset gradient use: Note : Remember to put gradient css files below the main.css file import. Also this won't affect the login mesh background's colors.

Mauve:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/mauve.css");

Example:

image

NightSky:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/nightSky.css");

Example:

image

Sea:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/sea.css");

Example:

image

JellySkin Github

Jellyflix​

Description: Jellyfin but Looks, Feels and Smells like Netflix

Examples

Login

image

Homepage

image

Library

image

Movie Title Page

image

TV-Show Title Page

image

Installation​
Auto Update: 
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");
Custom Version:
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@<version-number>/default.css");

With Logos(recommended):

Auto Update:
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/addons/Logo.css");
Custom Version:
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@<version-number>/default.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@<version-number>/addons/Logo.css");
You can also use Jellyfin colors instead of Netflix red

Jellyfin-Blue:

@import url("https://cdn.jsdelivr.net/gh/prayag17/[email protected]/addons/jf-blue.css");

Jellyfin-Purple:

@import url("https://cdn.jsdelivr.net/gh/prayag17/[email protected]/addons/jf-purple.css");

Jellyflix Github

Ultrachromic​

Description: The final form, the true evolution of the chromic theme saga!

Example

image

Login Page

image

Home/Index Page

image

Library Page

image

Title Page

image

Installation​

Multiple iterations and combinations to use with Ultrachromic. Check the github for more combination

Ultrachromic Github

Monochromic​

Description: This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information

Examples

Login Page

image

Home/Index Page

image

Library Page

image

Title Page

image

Installation​
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');

Monochromic Github

Kaleidochromic​

Description: A more colorful custom theme for Jellyfin mediaserver created using CSS overrides

Examples

Login Page

image

Home/Index Page

image

Library Page

image

Title Page

image

Installation​
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/kaleidochromic_preset.css');

Kaleidochromic Github

Novachromic​

Description: My third theme for Jellyfin media server, part of the "chromic" family.

Examples

Home/Index Oage

image

Library Page

image

Title Page

image

Dashboard page

image

Installation​
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/novachromic_preset.css');

Novachromic Github

DarkFlix​

Description: DarkFlix For Jellyfin is one of The Best Netflix Dark Theme for Jellyfin Around! Plus a big thanks to @prayag17 for the base and inspiration!

Examples

HomePage

image

Admin Dashboard

image

BoxStyle Actors

image

Video Player UI

image

Installation​
@import url("https://cdn.jsdelivr.net/gh/DevilsDesigns/Jellyfin-DarkFlix-Theme/Darkflix-v5.1.css");

Darkflix Github

Finimalism​

image

image

image

image

image

image

image

image

image

Installation​
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism7.css");

Finimalism Github

Glassmorphism​

image

image

image

image

Installation​
@import 'https://cdn.jsdelivr.net/gh/alexyle/jellyfin-theme@main/glassmorphism/theme.css';

Glassmorphism Github

Scyfin​

image

image

image

image

image

image

image

Installation​

Scyfin theme

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');

Scyfin Backdrops

@import url('https://cdn.jsdelivr.net/gh/loof2736/[email protected]/CSS/css-scyfin/scyfin-theme-backdrop.css');

Scyfin Github

Finality​

Player

14

Mobile

mobile

Under "Display" make sure you enable backdrops and use the Dark theme

darkbackdrops

Installation​
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/finality.css");

or, import the colour version with

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/Finality-Coloured.css");

Finality Github

Jamifin​

Home

image

Details

image

Library image

Admin image

🧩 Modules​

You can find our plug-and-play modules in the modules folder. Each module's folder contains an explanation of its purpose and detailed instructions on how to use it.

Installation​

Base

@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/base.css");

Complete

@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/complete.css");
🖌️ Customisation​

Not sure if you like our colour scheme? No worries, we allow easy access to our themes colours. Paste these below your import and customise away!

:root {
    /* Colours */
    --theme-background-colour: #101010;
    --theme-sidebar-background-colour: #222222;
    --theme-menu-background-colour: #3a3a3a80;
    --theme-menu-shadow-colour: #fff3;
    --theme-base-colour: #696969;
    --theme--hover-colour: #dbdbdb;
    --theme-restart-colour: #da87287e;
    --theme-shutdown-colour: #c21c1c9d;
    --theme-progress-bar-colour: #cfcfcf;
    --theme-progress-bar-background-colour: #2c2c2c;
    --theme-progress-bar-transcoding-colour: #eb7e25;

    /* General Appearance */
    --theme-roundness: .75rem;
    --theme-blur: 16px;
}

Jamifin Github

Zombie​

Desktop​

Login

image

Homepage

image

Desktop Details

image

Sidebar

image

TV-services

image

Seasons Page

image

Mobile​

Login

image

Homepage

image

Item Page

image

Details

image

Landscape

image

Tablet​

Portrait

image

Landscape

image

Installation​
@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/zombie-min-git.css');
Addon (Alternate View for Mobile-Portrait) (Add below your main import)​
@import URL('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/mobile-alt-layout.css');

or

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/mobile-alt-layout-v2.css');

Zombie Github